<template>
  <el-card class="box-card">
    <template #header>
      <span>院内人员</span>
    </template>
    <div class="hospital-table">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @cell-click="toPatientEmrDoc"
        style="width: 100%"
        stripe
      >
        <XMTableColumn property="doctorName" label="姓名"></XMTableColumn>
        <XMTableColumn property="total" label="新增病历总数">
          <template #header>
            <span>
              新增病历总数
              <icon-help title="院内人员-新增病历总数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="first" label="首诊病历总数">
          <template #header>
            <span>
              首诊病历总数
              <icon-help title="院内人员-首诊病历总数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="more" label="复诊病历总数">
          <template #header>
            <span>
              复诊病历总数
              <icon-help title="院内人员-复诊病历总数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="patientNumber" label="患者数">
          <template #header>
            <span>
              患者数
              <icon-help title="院内人员-患者数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="actionNumber" label="行动计划数">
          <template #header>
            <span>
              行动计划数
              <icon-help title="院内人员-行动计划数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="presNumber" label="开方数">
          <template #header>
            <span>
              开方数
              <icon-help title="院内人员-开方数" />
            </span>
          </template>
        </XMTableColumn>
        <XMTableColumn property="roleName" label="角色">
          <template #header>
            <span>
              角色
              <icon-help title="院内人员-角色" />
            </span>
          </template>
        </XMTableColumn>
      </el-table>
      <el-pagination
        background
        class="pagination"
        layout="prev, pager, next"
        :total="pager.totalRecords"
        v-model:current-page="pager.current"
        :page-size="pager.pageSize"
        @current-change="goPage"
      ></el-pagination>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
  import { ref, computed, watch } from 'vue'
  import { useStore } from 'vuex'
  import iconHelp from '../icon-help/index.vue'
  import moment from 'moment'
  const props = defineProps({
    timeRang: {
      type: Array,
      default: null,
    },
  })
  const emit = defineEmits(['select'])
  const pager = ref({
    current: 1,
    totalRecords: 0,
    pageSize: 10,
    pagingResource: '',
  })

  const tableData = ref([])
  const store = useStore()
  watch(
    () => store.getters.hospitalStaffInfo,
    (val) => {
      if (!val) return
      const { hospitalStaff, total } = val
      tableData.value = hospitalStaff
      pager.value.totalRecords = total
    },
    { deep: true, immediate: true }
  )

  watch(
    () => props.timeRang,
    (val) => {
      console.log('val =' + JSON.stringify(props))
      pager.value = {
        current: 1,
        totalRecords: 0,
        pageSize: 10,
        pagingResource: '',
      }
      const startDay = props.timeRang[0]
      const endDay = props.timeRang[1]
      store.dispatch('statistics/updateLocalHospitalStaffs', {
        startDay,
        endDay,
        pageIndex: pager.value.current,
        pageSize: pager.value.pageSize,
      })
    }
  )
  function toPatientEmrDoc(row: any, column: any) {
    const { doctorId } = row
    const { label } = column
    console.log('toPatientEmrDoc', { doctorId, name: label })
    emit('select', { doctorId, name: label })
  }
  function goPage(current: number) {
    pager.value.current = current
    store.dispatch('statistics/updateLocalHospitalStaffs', {
      startDay: props.timeRang[0],
      endDay: props.timeRang[1],
      pageIndex: current,
      pageSize: pager.value.pageSize,
    })
  }
</script>
<style lang="scss" setup>
  .hospital-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    .pagination {
      margin-top: 22px;
    }
  }
</style>
